JavaScrips(JS)怎麼一直提到,不是說NodeJS是用JavaScript寫的,前後端框架套件ExpressJS不也都是JS寫的嗎?怎麼現在又變成前端語言了呢?
在NodeJS出現之前,JS是一套前端語言,主要的功用是撰寫HTML或網頁所需要的功能或介面,介面通常是互動部分,當然也可以寫出排版、視覺等效果。編譯JS的主流平台是瀏覽器,所以當時學習JS的緣由就是希望能讓網頁前端有更好的功能體驗。
NodeJS出現之後,JS可以由NodeJS進行編譯,而NodeJS以JS為主要語言撰寫(但NodeJS本身以C++為底建構的),可以建構後端部分,也就是說,前後端都能夠由JS撰寫而成,NodeJS剛出現的時候,在網路界是個很突破的概念,學習JS的人數也開始迅速暴漲。而前後端是個概念,基本上後端部分的伺服器、資料庫都能夠由JS建構。
程式語言發展一向如此,越來越多人投入的語言,就有越多學習資源公開(程式界為世界一片淨土,人人不藏私),也就是為什麼現今的NPM這麼多的資源可以使用,讓我們都可以站在巨人的肩膀上往前走。
認識JS後,我們討論前端的主要架構-HTML
對任何網頁按下右鍵->檢視原始碼,會看到的語言八九不離十就是HTML。HTML為前端網頁主要建構的語言,一個網頁的架構仰賴HTML的元件組合而成,HTML主要由文件物件模型(Document Object Model, DOM)用<DOM元素>表示DOM元素開始,</DOM元素>表示DOM元素表示結束。
舉例來說,仔細看所有網頁幾乎都是像index.ejs內的起始與結束:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
第一行的用意是宣告以下使用HTML語言執行。
第二行與最後一行,能夠看到<html></html>
包覆全部的內容,這就是一個DOM物件。
第三行與第六行,能夠看到<head></head>
也是一個DOM物件,這個DOM物件在 之內,我們發現,縮排(最前面空格或tab)代表了DOM物件的階層,這是一個重要的概念,了解了也比較能讀懂HTML語言的規則。<html></html>
內主要就是由<head></head>
與</body組成,習慣上放屬性、環境相關的內容,例如,網頁標題、網頁屬性資料、備註資料、引用資料.....等等都會放在head裡面。
以上面index.ejs為例
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
兩行分別就是設定網頁標題與引用style.css文件,引用的文件在這份HTML內都可以操作使用。
而主要放置網站主要內容,例如架構、文字、按鈕.....等,內容部分不包含排版與大多互動功能,做出漂亮的版面與樣式,習慣上使用CSS撰寫,而功能方面實踐方面使用JS撰寫。今天我們認識了JS與HTML接下來,我們會介紹應用實例。